<!DOCTYPE html>
<html lang="en" style="width: 100%; height: 100%;">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Napi</title>
</head>
<style type="text/css">
        body {
			background-color: #000000;
			margin:0 auto;
			font-family: Consolas, sans-serif;
		}
        a  {
			text-decoration: none;
		}

		button.button {
			background-color: #ffffff;
            font-family: Consolas, sans-serif;
            font-size: 16px;
            border-radius: 3px;
            border-color: #C4C4C4;
            align-self: center;
            border: 1px solid #C4C4C4;
            outline: none;
			width: 100px; 
			height:24px
		}

		button.button:hover {
			background: #4B97D9;
			color: #fff;
			border: 0px;
			font-family: Consolas, sans-serif;
            font-size: 16px;
			width: 100px; 
			height: 24px
		}

		input.text:focus {
			outline: 2px solid #4B97D9;
  			border: 0px;
        }

		input.text {
			outline: 2px solid #C4C4C4;
			border: 0px;
		}
    .tabs{
        position: relative;
        height: 800px;
        min-height: 800px;
        max-height: 800px;
        clear: both;
        margin: 25px 0;
        overflow: hidden;
    }
    .tab{
        float: left;
        margin: 25px 0;
    }
    .tab label{
        background: #eee;
        padding: 10px 20px;
        position: relative;
        left: 1px;
        border: 0px solid;
        margin-left: -1px;
        z-index: 2;
        color: #333333;
        background: white;
    }
    input.text {
		width: 250px;
        height: 18px; 
        vertical-align:middle;
		}
    .content{
        position: absolute;
        top: 61px;
        left: 0;
        right: 0;
        bottom: 0;
        background: black;
        padding: 20px 20px;
        border: 0px solid #ccc;
        max-height: 800px;
        overflow: scroll;
    }
    [type=radio]:checked ~ label{
        color: white;
        background: #3288e9;
        border: 0px solid #ccc;
        z-index: 3;
    }
    [type=radio]:checked ~ label ~ .content{
        z-index: 1;
    }
</style>
<script type="text/javascript">
    var mode = 0;
    var flag = 0;
    let vscode = acquireVsCodeApi();
    function sendGnParamMsg() {
        var outputCodeDir = document.getElementById("outputCodeDirid").value;
        var originCodeDir = document.getElementById("originCodeDirid").value;
        var inputScriptDir = document.getElementById("inputScriptDirid").value;
        var scriptType = document.getElementById("scriptTypeid").value;
        var transplantDir = document.getElementById("transplantDirid").value;
        var subsystemName = document.getElementById("test_subsystemid").value;
        var componentName = document.getElementById("test_partid").value;
        var compileOptions = document.getElementById("compileOptionsid").value;

        var result = {
            msg: "gn",
            outputCodeDir: outputCodeDir,
            originCodeDir: originCodeDir,
            inputScriptDir: inputScriptDir,
            scriptType: scriptType,
            transplantDir: transplantDir,
            subsystemName: subsystemName,
            componentName: componentName,
            compileOptions: compileOptions,
        }
        vscode.postMessage(result);
    }

    function selectinputScriptDir() {
        var result = {
            msg: "selectinputScriptDir",
            mode: 0,
        }
        vscode.postMessage(result);
    }

    function selectoutputCodePath(message) {
        var result = {
            msg: message,
            mode: 1,
        }
        vscode.postMessage(result);
    }

    function selectoriginCodePath(message) {
        var result = {
            msg: message,
            mode: 1,
        }
        vscode.postMessage(result);
    }

    function selecttransplantPath(message) {
        var result = {
            msg: message,
            mode: 1,
        }
        vscode.postMessage(result);
    }

    function cancel() {
        var result = {
            msg: "cancel"
        }
        vscode.postMessage(result);
    }

    function getoutputCodeDirPath(filepath) {
        let fileTempName = "out";
        let pos = filepath.indexOf(fileTempName);
        filepath = filepath.substr(pos);
        return filepath;
    }

    function getinputScriptDirPath(filepath) {
        let fileTempName = "third_party";
        let pos = filepath.indexOf(fileTempName);
        filepath = filepath.substr(pos);
        return filepath;
    }

    function gettransplantDirPath(filepath) {
        let pos = filepath.lastIndexOf('\\');
        filepath = filepath.substr(pos);
        return filepath;
    }

    window.addEventListener('message', event => {
            const message = event.data.msg;
            const path = event.data.path;
            if (message == "selectinputScriptDir") {
                let filepath = getinputScriptDirPath(path);
                document.getElementById("inputScriptDirid").value = filepath;
                fillInputDir2(path);
            } else if (message == "selectoutputCodeDir") {
                let filepath = getoutputCodeDirPath(path);
                document.getElementById("outputCodeDirid").value = filepath;
                fillInputDir(path);
            } else if (message == "selectoriginCodeDir") {
                document.getElementById("originCodeDirid").value = path;
            } else if (message == "selecttransplantDir") {
                let filepath = gettransplantDirPath(path);
                document.getElementById("transplantDirid").value = filepath;
            }
            else {
                console.log("param is error");
            }
    })

    function fillInputDir(fileNames){
        let getDir;
        let fileName;
        fileName = fileNames;
        let fileTempName = "out";
	    let pos = fileName.indexOf(fileTempName);
        getDir = fileName.substring(0,pos-1);
        document.getElementById("originCodeDirid").value = getDir;
        document.getElementById("inputScriptDirid").value = getDir;
    }

    function fillInputDir2(fileNames){
        let getDir;
        let fileName;
        fileName = fileNames;
        getDir = fileName.substring(0,fileName.lastIndexOf('\\'));
        document.getElementById("transplantDirid").value = getDir;
    }

</script>
<body>
<div class="tabs">
    <div class="tab">
        <!-- <input type="radio" style="display: none;" id="tab1" name="group-1" checked> -->
        <label for="tab1">Gn-Gen</label>
        <div class="content">
            <div style="margin-top: 10px;">
               工程输出路径*:
                    <input class="text" accept="text" id="outputCodeDirid" value="out\rk3568" >
                <img src="./images/file.png" width="20px" height="20px" style="vertical-align:middle;" onclick="selectoutputCodePath('selectoutputCodeDir')">
            </div>
            <div style="margin-top: 10px;">
               工程源码路径*:
                    <input class="text" type="text" id="originCodeDirid">
                <img src="./images/file.png" width="20px" height="20px" style="vertical-align:middle;" onclick="selectoriginCodePath('selectoriginCodeDir')">
            </div>
            <div id="interface" style="margin-top: 10px;">
               输入脚本路径*:
                    <input class="text" type="text" id="inputScriptDirid" onchange="inputChange()" onporpertychange="inputChange() ">
                <img src="./images/file.png" width="20px" height="20px" style="vertical-align:middle;" onclick="selectinputScriptDir()">
            </div>
            <div style="margin-top: 10px;">
               输入脚本类型*:
                    <select id="scriptTypeid" style="width: 100px; height: 23px;">
                    <option value = "make">make</option>
                    <option selected value = "cmake">cmake</option>
                    <option value = "scons">scons</option>
                  </select>
            </div>
            <div style="margin-top: 10px;">
               GN生成路径*:&nbsp;&nbsp;  
                    <input class="text" type="text" id="transplantDirid" value="third_party">
                <img src="./images/file.png" width="20px" height="20px" style="vertical-align:middle;" onclick="selecttransplantPath('selecttransplantDir')">
            </div>
            <div style="margin-top: 10px;">
               子系统名称*:&nbsp;&nbsp;  
                    <input class="text" type="text" id="test_subsystemid" value="test_subsystem">
            </div>
            <div style="margin-top: 10px;">
               组件名称*:&nbsp;&nbsp;&nbsp;&nbsp;     
                    <input class="text" type="text" id="test_partid" value="test_part">
            </div>
            <div style="margin-top: 10px;">
               编译选项:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;      
                    <input class="text" type="text" id="compileOptionsid">
            </div>
            <div style="margin-top: 10px; text-align: left;">
               <button type="button" class="button" onclick="cancel()" style="background-color: #333333; border: 1px solid #333333; color: #fff;">Cancel</button>
                    <button type="button" class="button" onclick="sendGnParamMsg()" style="background-color: #4B97D9; border: 1px solid #4B97D9; color: #fff;">Ok</button>
                <a href="https://gitee.com/openharmony/napi_generator" target="_blank">
                    <button type="button" style="background-color: #333333; width: 20px; height: 20px; border-radius: 50%;border: none; color: #fff;">?</button>
                </a>
            </div>
        </div>
    </div>
</div>
</body>
</html>